// 用户模块
import { userAccountLogin } from '@/api/user'
export default {
  namespaced: true,
  // 存数据
  state: () => ({
    profile: {
      id: '',
      nickname: '',
      avatar: '',
      token: '',
      mobile: ''
    }
  }),
  //  唯一能改变state的数据
  mutations: {
    setUser (state, payload) {
      state.profile = payload
    },
    // 清空用户数据
    clearUserInfo (state) {
      // 清空vuex 和 localStorage vuex-persistedstate 插件实现vuex和本地同步，修改一处即可，不用手动清空localStorage
      state.profile = {}
    }
  },
  //  异步 + mutation
  actions: {
    async asyncSetUser (ctx, payload) {
      // 调用登陆接口
      const { account, password } = payload // 解构参数
      const res = await userAccountLogin({ account, password })
      // await userAccountLogin()  <===> return new Promise
      console.log(res)
      ctx.commit('setUser', res.result)
    }
  },
  //   基于state计算属性
  getters: {}
}

// store.dispatch 执行完后 返回一个Promise对象
// 实际应用：
// 在我们把所有的数据管理都封装到vuex中去，业务组件只需要通过store.dispatch去出发一个action函数
// 一旦action函数被触发后 异步请求就发起了 为了保证我们在异步成功返回之后 再执行后续操作
// 需要在 .then() 中执行
